

<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:首页
@author:成都市一颗优雅草科技有限公司     
@version V3.0
@松鼠聚合直播系统
注意：本前端源码遵循 蜻蜓优雅草产品开源授权协议，本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->




<template>
	<view class="content">
		<view class="nav-title">
		  <view :class="'nav-item hot' + (active == 0 ? '-active' : '')" @click="activeTab(0)"></view>
		  <view :class="'nav-item pingdao' + (active == 1 ? '-active' : '')" @click="activeTab(1)"></view>
		</view>
		<view style="width: 750rpx;">
			<view v-if="active==0">
				<uni-notice-bar style="margin-bottom: 0px;" scrollable="true" :text="appnotice" show-close
								:speed="30" background-color="#ffb6b2" color="#ff4940"></uni-notice-bar>
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
					<swiper-item v-for="(item,index) in images" :key="index">
						<view class="swiper-item"><image class="img" :src="item.img" @click="openUrl(item.link)" :lazy-load="true"></image></view>
					</swiper-item>
				</swiper>
				<view class="image-list">
					<view class="image-item" 
							:class="'image-item' + (isLogin ? '' : ' image-item-nologin')" 
							v-for="(video,index) in videoList" :key="index"  @click="playVideo(index)">
						<view class="blank-image" v-if="!video.img"></view>
						<image class="image"
							:src="video.img"
							v-if="video.img"
						  />
						  <div class="play-num" v-if="0">{{video.Number}}观看</div>
						  <div class="like-button" v-if="0"><van-icon name="like" /></div>
						  <div class="paly-tip" v-if="!isLogin && video.address">登陆后可查看</div>
						  <div class="info-item" v-if="video.address">
							<div class="item-title">{{video.title ? video.title : '无标题'}}</div>
							<div class="item-categroy" v-if="0">live</div>
						  </div>
					</view>
				</view>
			</view>
			<view v-if="active==1">
				<view class="pindao-title">
				  <view style="border-bottom: #e3e3e3 1rpx solid; margin-bottom: 20rpx;"></view>
				  <view style="display: flex;">
					  <view style="display: flex;width: 50%;">持续新增中</view>
					  <view style="display: flex;width: 50%; justify-content: flex-end;">{{pinDaoList.length}}个频道</view>
				  </view>
				</view>
				<view class="pindao-list">
				  <view class="pindao-item-box" v-for="(item,index) in pinDaoList" :key="index">
					<div class="pindao-item" @click="openVideoList(index)">
					  <div class="pinddo-image">
						<image
						  class="image"
						  :src="item.xinimg"
						/>
					  </div>
					  <div class="pindao-text">
						<div class="title">{{item.title}}<span v-if="pindoIndex==index"><img src="~@/static/playing.gif" /></span></div>
						<div class="look"><img src="~@/static/look.png" /> &nbsp;{{item.Number}} </div>
					  </div>
					</div>
				  </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {uniNoticeBar} from "@dcloudio/uni-ui"
	export default {
		components: {uniNoticeBar},
		data() {
			return {
				active:0,
				appnotice:'',
				images: [],
				isLogin:false,
				pindoIndex:-1,
				pinDaoList:[{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
				videoList:[{},{},{},{},{},{}],
				retry_times:0
			}
		},
		onLoad() {
			if(this.appInfo.inited){
				this.isLogin = this.appInfo.isLogin();
				this.appnotice = this.appInfo.get("appnotice");
				this.images = this.appInfo.get("adimages");
				this.loadInfo();
			}else{
				this.appInfo.onChange = ()=>{
					this.isLogin = this.appInfo.isLogin();
					this.appnotice = this.appInfo.get("appnotice");
					this.images = this.appInfo.get("adimages");
					this.loadInfo();
				}
			}			
		},
		onShow(){
			this.isLogin = this.appInfo.isLogin();
		},
		onPullDownRefresh(){
			this.request.get({
				url:"index.php/index/index/getinfo",
				success:(res)=>{
					if(res.statusCode==200){
						this.appInfo.data = res.data;
						var apiurl = this.appInfo.data.apiurl,byapiurl = this.appInfo.data.byapiurl;
						
						if(apiurl){
							apiurl = apiurl.split(";");
							if(apiurl.length == 2){
							  this.request.defaultApiUrl = apiurl[0];
							  this.request.defaultApiPath = apiurl[1];
							}
						}
						if(byapiurl){
							byapiurl = byapiurl.split(";");
							if(byapiurl.length == 2){
							  this.request.secondApiUrl = byapiurl[0];
							  this.request.secondApiPath = byapiurl[1];
							}
						}
						this.loadInfo();
					}
				},
				fail:(error)=>{
					uni.stopPullDownRefresh();
				}
			});
		},
		methods: {
			activeTab:function (active) {
			  this.active = active;
			},
			openUrl:function(url){
				if(url) plus.runtime.openURL(url);
			},
			loadInfo:function(){
				var that = this;
				this.retry_times = 0;
				this.request.getApiInfo((response)=>{
					console.log("加载频道信息");
					//console.log(response);
					if(typeof response.data != 'undefined'){
					  that.pinDaoList = response.data.pingtai;
					  //找出热门推荐
					  var index = Math.floor(Math.random()*that.pinDaoList.length);
					  var list = that.pinDaoList[index];
					  /*that.pinDaoList.forEach(function (data) {
						if(data.Number>list.Number) list = data;
					  });*/
					  that.loadVidoInfo(list);
					}
				},(error)=>{
					uni.stopPullDownRefresh();
				});
			},
			loadVidoInfo:function (list) {
			  var that = this;
			  const file = list.address;
			  this.request.getApiList(file,function (response) {
				uni.stopPullDownRefresh();
				console.log("加载热门直播信息");
				//console.log(response);
				if(response && typeof response.data.zhubo != 'undefined'){
				  that.videoList = response.data.zhubo;
				}else if(response && typeof response.data.result != 'undefined'){
				  that.videoList = response.data.result.zhubo;
				}else{
					//重试
					that.retry_times++;
					if(that.retry_times>10) return;//重试10次就不再试了 
					var index = Math.floor(Math.random()*that.pinDaoList.length);
					var list = that.pinDaoList[index];
					that.loadVidoInfo(list);
				}
			  },function (error) {
				uni.stopPullDownRefresh();
			  });
			},
			playVideo:function(index){
				if(!this.videoList[0].address){
					uni.showToast({title:"数据还未加载完成",icon:"none"});
					return;
				}
				if(!this.isLogin){
					uni.showModal({
						title:"登陆提示",
						content:"请先登陆会员后再试！",
						showCancel:false,
						success(){
							uni.navigateTo({
								url:"../login/login"
							});
						}
					});
					return;
				}
				this.appInfo.playInfo = this.videoList[index];
				uni.navigateTo({
					url:"../play/play"
				});
			},
			openVideoList:function (index) {
			  this.appInfo.pindoIndex = this.pindoIndex = index;
			  this.appInfo.pindaoAddress = this.pinDaoList[index].address;
			  this.appInfo.pindaoTitle = this.pinDaoList[index].title;
			  uni.navigateTo({
			  	url:"../index/pingdao"
			  })
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		background:#eeeff0;
		padding-top: 140rpx;
	}

	  .nav-title{
	    padding-top: 60rpx;
	    height: 80rpx;
		background: #FFFFFF;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;
	  }
	  .nav-title:after{
	    content: '';
	    display: table;
	    clear: both;
	  }
	  .nav-title .nav-item{
	    width: 90rpx;
	    height: 74rpx;
	    margin: 0rpx 20rpx;
	    float: left;
	  }
	  .nav-title .hot{
	    background: url("~@/static/hotnav_press.png") center no-repeat;
		background-size: cover;
	  }
	  .nav-title .hot-active{
	    background: url("~@/static/hotnav.png") center no-repeat;
		background-size: cover;
	  }
	  .nav-title .pingdao{
	    background: url("~@/static/pingdao.png") center no-repeat;
		background-size: cover;
	  }
	  .nav-title .pingdao-active{
	    background: url("~@/static/pingdao_press.png") center no-repeat;
		background-size: cover;
	  }
	  .swiper{
		  background: #FFFFFF;
		  padding: 20rpx;
		  height: 310rpx;
	  }
	  .swiper-item{
		  height: 310rpx;;
	  }
	  .swiper-item .img{
	    width: 100%;
	    height: 100%;
	    border-radius: 10rpx;
	  }
	  .image-list{
	    padding: 10rpx;
		width: 730rpx;
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
	  }
	  .image-list .image-item{
	    padding: 10rpx;
		width: 343rpx;
		height: 343rpx;
	    position: relative;
		display: flex;
	  }
	  .image-list .image-item .image{
		  width: 343rpx;
		  height: 343rpx;
		  border-radius: 10rpx;
	  }
	  .image-list .image-item-nologin .image{
		  filter: blur(5rpx);
		  -webkit-filter: blur(5rpx);
		}
	  .blank-image{
	    width: 343rpx;
	    height: 343rpx;
	    border-radius: 10rpx;
	    background: whitesmoke;
	  }
	  .play-num{
	    position: absolute;
	    color: #c9cfcd;
	    font-size: 26rpx;
	    top: 30rpx;
	    left: 20rpx;
	  }
	  .like-button{
	    position: absolute;
	    color: white;
	    font-size: 36rpx;
	    top: 25rpx;
	    right: 30rpx;
	  }
	  .paly-tip{
	    position: absolute;
	    color: #d4cccb;
	    font-size: 30rpx;
	    top: 150rpx;
	    left: 80rpx;
	    font-family: Arial;
	  }
	  .info-item{
	    position: absolute;
	    color: #ffffff;
	    font-size: 25rpx;
	    bottom: 40rpx;
	    left: 20rpx;
	    font-family: Arial;
	    background: url("~@/static/toptip.png") center no-repeat;
		background-size: cover;
	    width: 235rpx;
	    height: 39rpx;
	    line-height: 39rpx;
	  }
	  .info-item .item-title{
	    display: inline-block;
	    padding-left: 35rpx;
	    width: 175rpx;
	    height: 39rpx;
	    line-height: 39rpx;
	    font-size: 24rpx;
	    overflow: hidden;
	  }
	  .info-item .item-categroy{
	    font-size: 20rpx;
	    display: inline-block;
	    padding-left: 20rpx;
	    width: 85rpx;
	    height: 39rpx;
	    text-transform:Uppercase;
	    overflow: hidden;
	  }
	  .pindao-title{
	    background: white;
	    font-size: 32rpx;
	    padding: 20rpx 40rpx;
	    margin-bottom: 10rpx;
	    padding-top: 0rpx;
	  }
	  .pindao-list{
		  display: flex;
		  flex-direction: row;
		  flex-wrap:wrap;
	  }
	  .pindao-list .pindao-item-box{
		  display: flex;
		  width: 50%;
	  }
	  .pindao-item{
	    background: white;
	    width: 350rpx;
	    margin: 10rpx auto;
	  }
	  .pindao-item:after{
	    content: "";
	    display: table;
	    clear: both;
	  }
	  .pindao-item .pinddo-image{
		  float: left;
		  font-size: 30rpx;
		  margin:20rpx;
	  }
	  .pindao-item .pindao-text{
	    float: left;
	    font-size: 30rpx;
		width: 190rpx;
		overflow: hidden;
	    margin:20rpx;
	  }
	  .pindao-item .pinddo-image .image{
		  width: 80rpx;
		  height: 80rpx;
		  border-radius: 20rpx;
	  }
	  .pindao-item .pindao-text .title{
	    font-weight: bold;
		white-space: nowrap;
	    padding-bottom: 10rpx;
	    position: relative;
	  }
	  .pindao-item .pindao-text .title span{
	    position: absolute;
	    left: 150rpx;
	  }
	  .pindao-item .pindao-text .title img{
		  width: 40rpx;
		  height: 40rpx;
	  }
	  .look img{
		  width: 32rpx;
		  height: 25rpx;
		  margin-right: 10rpx;
	  }
</style>
